<!--
 * @Author: Damon Liu
 * @Date: 2025-04-29 16:40:59
 * @LastEditors: Damon Liu
 * @LastEditTime: 2025-04-30 17:32:39
 * @Description: 看每日的日程安排
-->
<template>
  <div class="daily-schedule-container">
    <div class="header">
      <a-date-picker v-model:value="selectedDate" @change="onDateChange" allowClear="false" />
      <span class="date-title">{{ dayTitle }}</span>
      <span class="count">共 {{ dayInfo.count }} 个日程</span>
    </div>
    <schedule-list :schedule-list="schedules" :show-date-filter="false" />
    <div v-if="!schedules.length" class="empty-tip">这一天没有日程安排</div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import ScheduleList from './components/scheduleList.vue'

const selectedDate = ref(dayjs())   // 选中的日期
const schedules = ref([])   // 日程列表
const dayInfo = ref({ date: '', count: 0 })     // 日程信息

// 获取日程标题
const dayTitle = computed(() => {
  return dayjs(selectedDate.value).format('YYYY年MM月DD日 dddd')
})
// 获取每日日程
const fetchDailySchedules = async () => {
  try {
    const dateStr = dayjs(selectedDate.value).format('YYYY-MM-DD')
    const res = await window.ipcRenderer.getDailySchedules(dateStr)
    schedules.value = res.schedules || []
    dayInfo.value = res.dayInfo || { date: '', count: 0 }
  } catch (e) {
    message.error('获取日程失败')
  }
}
// 日期变化
const onDateChange = () => {
  fetchDailySchedules()
}
// 挂载
onMounted(() => {
  fetchDailySchedules()
  window.ipcRenderer.on('schedule-updated', fetchDailySchedules)
})
</script>

<style scoped>
.daily-schedule-container {
  padding: 0px 0;
  width: 100%;

}
.header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
}
.date-title {
  font-weight: bold;
  font-size: 18px;
  color: #222;
}
.count {
  color: #888;
  margin-left: 8px;
  font-size: 14px;
}
.empty-tip {
  color: #bbb;
  text-align: center;
  margin-top: 60px;
  font-size: 16px;
  letter-spacing: 2px;
}
</style>

showDateFilter